<!--  -->
<template>
  <div class="leftTopModule">
    <header class="head">
        <titleModule :title="state.titleName"></titleModule>
    </header>
    <section class="main" id="main"></section>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import titleModule from '../../components/title/index.vue'
import { Line } from '@antv/g2plot';
const state = reactive({
    titleName:'各区GDP'
})
//创建折线图
const createLine = () =>{
    //1.创建数据源
    const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
    ]
    //2.创建line对象
    const linePlot = new Line('main',{
        data,
        xField:'year',
        yField:'value',
    })
    //3.渲染
    linePlot.render();
}

onMounted(()=>{
    createLine()
})
</script>
<style  scoped>
.leftTopModule{
    width: 100%;
    height: 100%;
}
.head{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main{
    width: 100%;
    height: 85%;
    
}
</style>